<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css方法</title>
    <style>
        .box{
            width:500px;
            margin:20px auto;
            background:rgba(52,33,66,0.3);
            padding:10px 8px;
        }
        input{
            text-align:center;
            outline:none;
        }
    </style>
    <script src="../../js/jquery-1.11.0.js"></script>
    <script>
        $(this).ready(function(){
            var Wrap = $(".box");
            var cont = Wrap.find(".cont");
            $("#btn").bind("click",function(){                          //  给button绑定点击事件
                /*cont.css({color:"red"});                              //Css方法样式第一种方法，color为css方法的对象属性，可以不加双引号，不加表示是自带的对象*/
                /*cont.css({"color":"red"});                            //Css方法样式第二种方法，color为HTML的CSS属性，要加双引号*!/ */
                /*cont.css({"color":"red","background":"blue"});      //Css方法样式第三种方法，color为HTML的CSS属性，要加双引号，多个样式用逗号隔开*/
                cont.css({color:"red",fontSize:"20px"});          //Css方法样式第四种方法，color为css方法的对象属性，可以不加双引号，不加表示是自带的对象，多个属性用逗号隔开，注意background的第二个单词首字母为大写，符合驼峰命名法，它属于css方法的属性名
                var str = $(this).html();           //获取按钮HTML内容
                $("input").val(str);                //将其赋给input，作为input的值
            });
        });
    </script>
</head>
<body>
    <div class="box">
        <div class="cont">我是内容！</div>
        <button id="btn">点我有惊喜！</button>
        <input type="text" value="" />
    </div>
</body>
</html>